<template>
	<image :src="theme?.bg?.remit" class="img-top"></image>
	<NavBar :obj="{ title: title, color: '#fff', backgroundColor: 'transparent' }" :scrollTop="scrollTop" />
	<view class="fill">
		<view class="balance">
			<view class="val">{{ info.account ? info.account[0].balance : 0 }}</view>
			<view class="tips">当前{{ info.account ? info.account[0].title : '' }}</view>
		</view>
		<view class="layout-col">
			<view class="item">
				<view class="label">充值金额</view>
				<view class="content flex items-center">
					<InputAmount v-model="formRef.amount" customClass="inp flex flex-1" placeholder="请填写提现金额" />

					<!-- <input type="number" placeholder="请填写充值金额" class="inp flex flex-1" placeholder-class="place-inp" v-model="formRef.amount" @input="amountInput" /> -->
				</view>
			</view>
		</view>

		<view class="pay_way flex item justify-between">
			<view class="lable">充值方式</view>

			<view class="method flex items-center justify-between">
				<view :class="{ active: formRef.pay_way == item.type }" class="item" v-for="(item, index) in info.method" :key="index" @click="changeMethod(item)">
					{{ item.title }}
				</view>
			</view>
		</view>

		<view class="col">
			<blcok v-if="formRef.pay_way != 'bank'" class="flex items-center justify-center show">
				<view class="item flex items-center justify-between">
					<image
						:src="imgUrl + currentItem[currentItem.type + '_image']"
						mode="aspectFit"
						@click="showPreviewImage([imgUrl + currentItem[currentItem.type + '_image']])"
					></image>
				</view>
			</blcok>

			<blcok v-if="formRef.pay_way == 'bank'">
				<view class="item flex items-center justify-between">
					<view class="left">银行名称</view>
					<view class="right">{{ currentItem.bank_name }}</view>
				</view>
				<view class="item flex items-center justify-between">
					<view class="left">开户支行</view>
					<view class="right">{{ currentItem.bank_address }}</view>
				</view>
				<view class="item flex items-center justify-between">
					<view class="left">银行账号</view>
					<view class="right">{{ currentItem.bank_number }}</view>
				</view>
				<view class="item flex items-center justify-between">
					<view class="left">银行户名</view>
					<view class="right">{{ currentItem.bank_open_name }}</view>
				</view>
			</blcok>
		</view>

		<view class="pay_way">
			<view class="lable">支付凭证</view>

			<view class="images">
				<Upload v-model="files" :maxCount="1" @change="handleChange" />
			</view>
		</view>

		<view class="desc">
			<rich-text :nodes="info.factor?.remit_msg"></rich-text>
		</view>

		<view class="btn" @click="remitPayment">
			<text>确认充值</text>
		</view>

		<view class="record flex items-center justify-center" @click="goUrl('/pages/remit/record')">
			充值记录
			<up-icon name="arrow-right-double" :color="theme?.themeColor" class="icon"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, goUrl, hint, imgUrl, loading, closeLoading, showPreviewImage, isFloat, goRedirect} from '/service/port';
	import { onShow, onLoad, onPageScroll } from '@dcloudio/uni-app';
	import Upload from '/components/Uploads.vue';
	import InputAmount from '/components/InputAmount.vue';
	import { useThemeStore } from '@/stores/theme';
	const load = ref(false);
	const title = ref('');
	onLoad((e) => {
		title.value = e.title;
	});

	const theme = useThemeStore();

	const info = ref({});
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const currentItem = ref({});
	const formRef = ref({
		account: '',
		pay_way: '',
		amount: '',
		images: ''
	});
	const files = ref([]);
	const handleChange = (event) => {
		const images = files.value.map((i) => {
			return i.url;
		});
		formRef.value.images = images.length > 0 ? images.join(',') : '';
	};

	const changeMethod = (item) => {
		formRef.value.pay_way = item.type;
		currentItem.value = item;
	};

	async function remitPayment() {
		if (!formRef.value.amount || formRef.value.amount < 0) {
			hint('充值金额错误');
			return false;
		}

		loading();

		let res = await port('remitPayment', formRef.value);

		hint(res.msg);
		setTimeout(() => {
			closeLoading();
			goRedirect('/pages/remit/record');
		}, 200);
	}

	async function getRemitIndex() {
		let res = await port('getRemitIndex');
		info.value = res.data;
		formRef.value.pay_way = res.data.method[0].type;
		formRef.value.account = res.data.account[0].type;
		currentItem.value = res.data.method[0];
	}

	onShow(() => {
		if (!load.value) {
			formRef.value = {
				account: '',
				pay_way: '',
				amount: '',
				images: ''
			};
			files.value = [];

			getRemitIndex();

			load.value = true;
		}
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
		padding-bottom: 80rpx;
	}
	.desc {
		margin: 50rpx 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		word-break: break-all;
	}
	.btn {
		background: $theme-bg-btn-color;
		border-radius: 44rpx;
		padding: 20rpx 0;
		text-align: center;
		margin-top: 70rpx;
		> image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 15rpx;
		}
		> text {
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
	.record {
		color: $theme-color;
		font-size: 26rpx;
		margin: 40rpx;
		.icon {
			margin-top: 5rpx;
			margin-left: 8rpx;
		}
	}
	.img-top {
		width: 100%;
		height: 500rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;
		margin: 60rpx 30rpx 30rpx 30rpx;
		.balance {
			.val {
				font-weight: 500;
				font-size: 56rpx;
				color: #ffffff;
			}
			.tips {
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 42rpx;
				opacity: 0.7;
				margin-top: 10rpx;
				margin-left: 3rpx;
			}
		}

		.col {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 0 30rpx;
			.item {
				padding: 20rpx 0;
				.left {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
				.right {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
				}
				> image {
					width: 320rpx;
					height: 320rpx;
				}
			}
		}

		.layout-col {
			margin-top: 45rpx;
			.item {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 30rpx;
				.label {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
				}
				.content {
					height: 120rpx;
					border-bottom: 1rpx solid #eee;
					.inp {
						font-weight: 500;
						font-size: 50rpx;
						color: #000000;
						height: 120rpx;
						line-height: 120rpx;
					}
					.place-inp {
						color: #b6b6b6;
					}
					.right {
						font-weight: 400;
						font-size: 28rpx;
						color: #fb3204;
					}
				}

				.bom {
					padding-top: 26rpx;
					> text {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					.balance {
						font-weight: 500;
						font-size: 24rpx;
						color: #fe7800;
					}
				}
			}
		}

		.pay_way {
			margin: 30rpx 0;
			.lable {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				position: relative;
			}
			.images {
				margin-top: 25rpx;
				border-radius: 18rpx;
				background: #ffffff;
				padding: 30rpx;
			}
			.method {
				gap: 14rpx;
				.item {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					background: #ffffff;
					border-radius: 18rpx;
					padding: 10rpx 25rpx;
				}
				.active {
					font-weight: 500;
					font-size: 26rpx;
					color: $theme-color;
					background: $theme-bg-gradient-color;
					border-radius: 18rpx;
					border: 1px solid $theme-color;
				}
			}
		}
	}
</style>
